<script setup>
import {CriteriaStore,useCityStore,useUserStore,useQueryStore } from '@/stores'
import { ref,watch } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { MessagePlugin } from 'tdesign-vue-next';
const useCity = useCityStore()
const criteria = CriteriaStore()
const userStore = useUserStore()
const router = useRouter()
const queryStore = useQueryStore()
const formData = ref({
    expect_job: null,
    expect_city: null,
    expect_salary_bottom: null,
    expect_salary_top: null,
    degrees: null,
    real_name: null
})
const industryList = ref(null);
const flag = ref('guide1')
const dialogCityVisible = ref(false)
const query_industry = (industry) => {
    userStore.checkToken();
    axios.get('http://localhost:8000/user/guide/industry',{
        params:{
            industry,   
        },
        headers:{
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            industryList.value = resp.data.data
            flag.value = 'guide2'
        }else{
            MessagePlugin.error(resp.data.msg);
        }
    }).catch(error => {
        MessagePlugin.error("请求失败！")
    })
}


const citylist = ref(null)
const choose_city = () => {
    userStore.checkToken();
    axios.get('http://localhost:8000/user/getCity',{
        headers: {
            authentication: userStore.token,
        }
    })
    .then(resp => {
    if(resp.data.code === 1){
      citylist.value = resp.data.data
      dialogCityVisible.value = true
      }
    }).catch(error => {
        MessagePlugin.error("请求失败！")
    })
}

const setJob = (job) => {
    formData.value.expect_job = job;
    flag.value = 'guide3'
}
const setCity = (city) => {
    formData.value.expect_city = city
    dialogCityVisible.value = false
}
// const setTop = (salary) => {
//     formData.expect_salary_top = s
// }
const check_form = (x) => {
    if(formData.value.real_name && formData.value.real_name !== null){
        if(x === 1 && (!formData.value.expect_city || !formData.value.expect_salary_bottom || !formData.value.expect_salary_top || !formData.value.degrees)){
            MessagePlugin.error("您的意向填写不完整，请继续补充！")
        }else{
            submit();
        }
    }else{
        MessagePlugin.error("请填写真实姓名！")
    }
} 
const submit = () => {
    axios.post('http://localhost:8000/user/submit',{
            expectJob: formData.value.expect_job,
            expectCity: formData.value.expect_city,
            expectSalaryBottom: formData.value.expect_salary_bottom,
            expectSalaryTop: formData.value.expect_salary_top,
            degrees: formData.value.degrees,
            realName: formData.value.real_name,
        },
        {
        headers:{
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            getInfo()
            MessagePlugin.success("填写成功！")
            loading.value = true
            setTimeout(() => {
                loading.value = false;
                router.push('/home')
            },3000)
            
            
        }else{
            MessagePlugin.error("请求失败！")
            setTimeout(() => {
                MessagePlugin.warning("正在返回登陆...")
                router.push('/login')
            },4000)
        }
    })
}
const getInfo = () => {
    userStore.checkToken();
    axios.post('http://localhost:8000/user/getInfo',{},{
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            userStore.login_success(resp.data.data)
            queryStore.setQuery({
                job: userStore.user.expectJob,
            })
        }
    })
}
const loading = ref(false);
</script>

<template>
    <t-loading fullscreen :loading="loading" text="正在跳转首页..." size="small"></t-loading>
    <div style="height: 920px;
    display: flex;
    justify-content: center;
    align-items: center;">
        <el-card style="width: 1000px; height: 700px;">
            <div >
                <img src="/src/assests/logo2.png" alt="" style="width: 105px; height: 50px;">
                <div style="font-size: 25px;
                font-weight: 900;
                display: inline-block;
                margin-left: 260px;
                position: relative; top: -18px;">欢迎来到博才招聘</div>
            </div>
            <t-divider />
            <!-- ----------------------------- -->
            <div v-if="flag === 'guide1'">
                <div style="font-size: 20px;
                font-weight: 800;
                color: rgb(39, 148, 211);margin-bottom: 20px;">请选择您的意向行业：</div>
                <div style="width: 960px; height: 600px;">
                    <div class="bubble" v-for="(x, index) in criteria.Industry" 
                    :key="index" @click="query_industry(x.name)"
                    >{{x.name}}</div>
                </div>
            </div>
            <!-- ------------------------------ -->
            <div v-if="flag === 'guide2'">
                <div style="font-size: 20px;
                font-weight: 800;
                color: rgb(39, 148, 211);margin-bottom: 20px;">请选择您的意向职位：</div>
                <div style="height: 500px;" class="job">
                    <div style="margin-bottom: 15px;" v-for="(x, index) in industryList" :key="index">
                        <div style="width: 250px;
                        float: left;
                        padding: 10px;">{{x.direction}}</div>
                        <div style="display: inline-block;padding-top: 10px; width: 650px;">
                            <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;"
                            v-for="(y, index) in x.jobList" :key="index" @click="setJob(y)">{{y}}</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ---------------------------------------- -->
            <div v-if="flag === 'guide3'">
                <div style="font-size: 20px;
                font-weight: 800;
                color: rgb(39, 148, 211);margin-bottom: 20px;">请填写您的意向</div>
                <div style="height: 500px;">
                    <div class="layout">
                        <div style="font-size: 15px; color: #7a7a7a;">请选择你的意向城市：</div>
                        <div style="height: 90px; display: flex; align-items: center;">
                            <div v-for="(x, index) in useCity.city" :key="index"
                             @click="setCity(x)" class="hot_city">{{ x }}</div>
                            <div class="hot_city" plain @click="choose_city">其他城市</div>
                            <el-dialog v-model="dialogCityVisible" title="请选择城市："
                            width="650"
                            style="height: 400px;
                            overflow-y: auto;">
                                <div style="width: 610px;" v-for="(x, index) in citylist" :key="index">
                                    <div class="form" style="width: 100px;">{{x.flag}}</div>
                                    <div class="form" style="width: 500px;margin-bottom: 20px;" >
                                        <div style="display: inline-block;
                                        margin-right: 20px; margin-bottom: 10px;cursor: pointer;
                                        "@click=setCity(y) v-for="(y, index) in x.cityList">{{y}}</div>
                                    </div>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                    <div class="layout">
                        <div style="font-size: 15px; color: #7a7a7a;">请选择你的期望薪资：</div>
                        <div style="display: flex; align-items: center; height: 90px;">
                            <div style="float: left; margin-right: 10px; font-size: 14px; color: rgb(39, 148, 211);">最低薪资(元/月)</div>
                            <t-select :value=formData.expect_salary_bottom v-model="formData.expect_salary_bottom" style="width: 220px; float: left;">
                                <t-option 
                                v-for="(x, index) in criteria.salary_bottom"
                                :key="index" 
                                :label=x.label
                                :value=x.value />
                              </t-select>
                            <div style="margin-left: 10px;margin-right: 10px;">——</div>
                            <div style="float: left;margin-right: 10px;font-size: 14px; color: rgb(39, 148, 211);">最高薪资(元/月)</div>
                            <t-select :value=formData.expect_salary_top  v-model="formData.expect_salary_top" style="width: 220px; display: inline-block;">
                            <t-option 
                            v-for="(x, index) in criteria.salary_top"
                            :key="index" 
                            :label=x.label
                            :value=x.value />
                            </t-select>
                        </div>
                    </div>
                    <div class="layout">
                        <div style="font-size: 15px; color: #7a7a7a;">请填写您的最高学历：</div>
                        <div>
                            <t-select style="width: 220px;
                             display: inline-block;
                             margin-top: 10px;" v-model="formData.degrees">
                                <t-option 
                                v-for="(x, index) in criteria.degrees"
                                :key="index" 
                                :label=x.name
                                :value=x.name />
                              </t-select>
                        </div>
                    </div>
                    <div class="layout">
                        <div style="font-size: 11px; color: red;">*必填</div>
                        <div style="font-size: 15px; color: #7a7a7a;">
                            请填写您的真实姓名：</div>
                        <div>
                            <el-input v-model="formData.real_name" style="width: 220px;margin-top: 10px;"></el-input>
                        </div>
                    </div>
                    <t-divider style="margin: 0px !important;"/>
                    <div style="text-align: right; margin-top: 40px;">
                        <el-button type="primary" @click="check_form(0)">跳过</el-button>
                        <el-button type="primary" style="margin-right: 30px;" @click="check_form(1)">完成</el-button>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.bubble{
    float: left;
    color: white;
    margin: 15px 10px;
    width: 170px;
    height: 70px;
    background-color: rgb(116, 193, 237); /* 黑色，50%透明度 */
    border-radius: 10%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 24px;
    cursor: pointer;
}
.bubble:hover{
    transform: scale(1.1);
    
}
.job{
    overflow-y: scroll;
    overflow-y: auto;
}
.layout{
    height: 100px;
}
.hot_city{
    font-size: 14px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 15px;
    cursor: pointer;
    
}
.hot_city:hover{
    color: rgb(50, 176, 249);
}
.form{
    float: left;
}
</style>